<template>
  <view class="container">
    <!-- 商户信息 -->
    <view class="merchant-header">
      <image class="merchant-bg" :src="merchant.logo" mode="aspectFill"></image>
      <view class="merchant-info">
        <image class="merchant-logo" :src="merchant.logo" mode="aspectFill"></image>
        <view class="merchant-detail">
          <text class="merchant-name">{{ merchant.name }}</text>
          <view class="merchant-rating">
            <!-- 评分暂时隐藏 -->
            <!-- <text class="rating-value">{{ merchant.rating }}</text>
            <text class="rating-star">★</text> -->
            <text class="sales-info">月售{{ merchant.sales }}+</text>
          </view>
          <view class="merchant-meta">
            <text class="meta-item">{{ estimateTime(merchant.baseTime, merchant.distance) }}</text>
            <text class="meta-divider">|</text>
            <text class="meta-item">起送¥{{ merchant.minPrice }}</text>
            <text class="meta-divider">|</text>
            <text class="meta-item">配送¥{{ merchant.deliveryFee }}</text>
          </view>
          <text class="merchant-address">{{ merchant.address }}</text>
          <contact-buttons :merchant-phone="merchant.phone" />
        </view>
      </view>
    </view>

    <!-- 分类和商品列表 -->
    <view class="goods-container">
      <!-- 左侧分类列表 -->
      <scroll-view class="category-list" scroll-y>
        <view class="category-item" v-for="(category, index) in categories" :key="index"
          :class="{ active: currentCategory === category.id }" @click="selectCategory(category.id)">
          <text class="category-name">{{ category.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <scroll-view class="goods-list" scroll-y @scrolltolower="loadMoreGoods">
        <view class="goods-item" v-for="(item, index) in filteredGoods" :key="index">
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-desc">{{ item.description }}</text>
            <text class="goods-sales">月售{{ item.sales }}+</text>
            <view class="goods-price-row">
              <view class="goods-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ item.price }}</text>
                <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
              </view>
              <view class="add-btn" v-if="item.specifications && item.specifications.length > 0"
                @click.stop="showGoodsDetail(item)">
                <text class="add-text">选规格</text>
              </view>
              <view v-else class="add-icon" @click.stop="addToCart(item)"></view>
            </view>
          </view>
        </view>

        <!-- 加载更多区域 -->
        <view class="load-more-area">
          <uni-load-more :status="loadingStatus" :contentText="{
            contentdown: '上拉显示更多',
            contentrefresh: '正在加载...',
            contentnomore: '我是有底线的'
          }"></uni-load-more>
        </view>
      </scroll-view>
    </view>

    <!-- 购物车 -->
    <view class="cart-bar" :class="{ 'empty-cart': cartStore.isEmpty }">
      <view class="cart-info" @click="showCartDetail">
        <view class="cart-icon">
          <view class="cart-icon-bg">
            <uni-icons type="cart" size="30" color="#fff"></uni-icons>
          </view>
          <text class="cart-count" v-if="!cartStore.isEmpty">{{ cartStore.totalCount }}</text>
        </view>
        <view class="cart-price">
          <text class="price-label">总计</text>
          <text class="price-value">¥{{ cartStore.totalPrice.toFixed(2) }}</text>
        </view>
      </view>
      <!-- 外卖配送差额提示 -->
      <view class="delivery-tip" v-if="merchant.supportDelivery === 1 && deliveryShortage > 0">
        <text>差¥{{ deliveryShortage.toFixed(2) }}可配送</text>
      </view>
      <view class="checkout-btn" @click="goToCheckout">
        <text>{{ cartStore.isEmpty ? '选择商品' : '去结算' }}</text>
      </view>
    </view>

    <!-- 商品详情弹窗 -->
    <uni-popup ref="goodsDetailPopup" type="bottom">
      <view class="goods-detail-popup">
        <view class="popup-header">
          <text class="close-btn" @click="closeGoodsDetail">×</text>
        </view>
        <view class="popup-content" v-if="currentGoods">
          <image class="detail-image" :src="currentGoods.image" mode="aspectFill"></image>
          <view class="detail-info">
            <text class="detail-name">{{ currentGoods.name }}</text>
            <text class="detail-price">¥{{ currentGoods.price }}</text>
            <text class="detail-desc">{{ currentGoods.description }}</text>
          </view>

          <!-- 规格选择 -->
          <view class="specs-section" v-if="currentGoods.specifications && currentGoods.specifications.length > 0">
            <view class="spec-group" v-for="(spec, specIndex) in currentGoods.specifications" :key="specIndex">
              <text class="spec-title">{{ spec.name }}</text>
              <view class="spec-options">
                <view class="spec-option" v-for="(option, optionIndex) in spec.options" :key="optionIndex"
                  :class="{ active: selectedSpecs[specIndex] === optionIndex }"
                  @click="selectSpec(specIndex, optionIndex)">
                  <text>{{ option.name }}</text>
                  <text v-if="option.price > 0">+¥{{ option.price }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 数量选择 -->
          <view class="quantity-section">
            <text class="quantity-title">数量</text>
            <view class="quantity-control">
              <text class="quantity-btn" @click="decreaseQuantity">-</text>
              <text class="quantity-value">{{ quantity }}</text>
              <text class="quantity-btn" @click="increaseQuantity">+</text>
            </view>
          </view>
        </view>

        <view class="popup-footer">
          <view class="add-to-cart-btn" @click="confirmAddToCart">
            <text>加入购物车</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 购物车详情弹窗 -->
    <uni-popup ref="cartDetailPopup" type="bottom">
      <view class="cart-detail-popup">
        <view class="popup-header">
          <text class="popup-title">购物车</text>
          <text class="clear-btn" @click="clearCart">清空</text>
        </view>
        <view class="cart-items">
          <view class="cart-item" v-for="(item, index) in cartStore.items" :key="index">
            <view class="item-info">
              <text class="item-name">{{ item.name }}</text>
              <text class="item-specs" v-if="item.specificationsStr">{{ item.specificationsStr }}</text>
            </view>
            <view class="item-price-control">
              <text class="item-price">¥{{ (item.price * item.quantity).toFixed(2) }}</text>
              <view class="quantity-control">
                <text class="quantity-btn" @click="updateCartItemQuantity(index, item.quantity - 1)">-</text>
                <text class="quantity-value">{{ item.quantity }}</text>
                <text class="quantity-btn" @click="updateCartItemQuantity(index, item.quantity + 1)">+</text>
              </view>
            </view>
          </view>
        </view>

      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import estimateTime from '@/utils/time.js';
import ContactButtons from '@/components/ContactButtons.vue';
import { useCartStore } from '@/store/cart.js';
import {getMerchantById} from "@/api/merchant.js";
import { getCurrentLocation } from '@/utils/location.js';
import {getGoodsCategoryList} from "@/api/goodsCategory.js";
import {getGoodsList} from "@/api/goods.js";

const cartStore = useCartStore();
const merchantId = ref(0);
const merchant = ref({});
const categories = ref([]);
const goods = ref([]);
const displayGoods = ref([]); // 当前显示的商品列表
const currentCategory = ref(0);
const currentGoods = ref(null);
const selectedSpecs = ref([]);
const quantity = ref(1);
const goodsDetailPopup = ref(null);
const cartDetailPopup = ref(null);
const pageSize = 5; // 每页显示的商品数量
const currentPage = ref(1); // 当前页码
const loadingStatus = ref('more'); // 加载状态：more-加载前，loading-加载中，noMore-没有更多了

// 根据当前选择的分类筛选商品
const filteredGoods = computed(() => {
  return displayGoods.value;
});

// 计算外卖配送差额
const deliveryShortage = computed(() => {
  if (!merchant.value.minPrice || cartStore.totalPrice >= merchant.value.minPrice) {
    return 0;
  }
  return merchant.value.minPrice - cartStore.totalPrice;
});

// 获取当前分类下的所有商品
const getCategoryGoods = () => {
  if (currentCategory.value === 0) {
    return goods.value;
  }
  return goods.value.filter(item => item.categoryId === currentCategory.value);
};

// 加载更多商品
const loadMoreGoods = () => {
  if (loadingStatus.value === 'loading' || loadingStatus.value === 'noMore') {
    return;
  }

  loadingStatus.value = 'loading';

  // 模拟异步加载数据
  setTimeout(() => {
    const categoryGoods = getCategoryGoods();
    const startIndex = (currentPage.value - 1) * pageSize;
    const endIndex = currentPage.value * pageSize;

    // 检查是否还有更多数据
    if (startIndex >= categoryGoods.length) {
      loadingStatus.value = 'noMore';
      return;
    }

    // 获取当前页的数据
    const currentPageData = categoryGoods.slice(startIndex, endIndex);

    // 添加到已加载的商品列表中
    displayGoods.value = [...displayGoods.value, ...currentPageData];

    // 更新页码和加载状态
    currentPage.value++;

    // 检查是否还有更多数据
    if (endIndex >= categoryGoods.length) {
      loadingStatus.value = 'noMore';
    } else {
      loadingStatus.value = 'more';
    }
  }, 500); // 模拟网络延迟
};

onLoad((options) => {
  console.log("onLoad options===", options);

  if (options.id) {
    merchantId.value = parseInt(options.id);
    loadMerchantData();

    // 初始化商品列表
    currentPage.value = 1;
    displayGoods.value = [];
    loadMoreGoods(); // 加载第一页数据
  }

  // 初始化购物车
  cartStore.loadFromStorage();

  // 监听商品列表滚动到底部事件
  const onGoodsScrollToLower = () => {
    loadMoreGoods();
  };

  // 添加滚动监听
  uni.$on('onGoodsScrollToLower', onGoodsScrollToLower);

  // 组件销毁时移除监听
  return () => {
    uni.$off('onGoodsScrollToLower', onGoodsScrollToLower);
  };
});


// 加载商户数据
const loadMerchantData = async () => {
  //获取当前选择的位置
  const location = await getCurrentLocation();
  // 获取商户信息
  const merchantRes = await getMerchantById(merchantId.value, location.latitude, location.longitude);
  merchant.value = merchantRes.data;
  
  // 获取商品分类
  const goodsCategoryRes = await getGoodsCategoryList(merchantId.value);
  const goodsCategoryList = goodsCategoryRes.data;
  
  categories.value = [{ id: 0, name: '全部' }, ...goodsCategoryList];
  if (categories.value.length > 0) {
    currentCategory.value = categories.value[0].id;
  }

  // 获取商品列表
  const goodsListRes = await getGoodsList(merchantId.value);
  goods.value = goodsListRes.data;
};

// 选择分类
const selectCategory = (categoryId) => {
  if (currentCategory.value === categoryId) return;
  currentCategory.value = categoryId;
  // 重置页码和商品列表
  currentPage.value = 1;
  displayGoods.value = [];
  loadingStatus.value = 'more';
  loadMoreGoods(); // 重新加载第一页数据
};

// 显示商品详情
const showGoodsDetail = (goods) => {
  currentGoods.value = goods;
  quantity.value = 1;
  selectedSpecs.value = [];

  // 默认选择每个规格的第一个选项
  if (goods.specifications && goods.specifications.length > 0) {
    goods.specifications.forEach((spec, index) => {
      selectedSpecs.value[index] = 0;
    });
  }

  goodsDetailPopup.value.open();
};

// 关闭商品详情
const closeGoodsDetail = () => {
  goodsDetailPopup.value.close();
};

// 选择规格
const selectSpec = (specIndex, optionIndex) => {
  selectedSpecs.value[specIndex] = optionIndex;
};

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

// 增加数量
const increaseQuantity = () => {
  quantity.value++;
};

// 确认添加到购物车
const confirmAddToCart = () => {
  if (!currentGoods.value) return;

  // 获取选择的规格
  const selectedSpecifications = [];
  if (currentGoods.value.specifications && currentGoods.value.specifications.length > 0) {
    currentGoods.value.specifications.forEach((spec, index) => {
      const optionIndex = selectedSpecs.value[index] || 0;
      selectedSpecifications.push({
        name: spec.name,
        value: spec.options[optionIndex].name,
        price: spec.options[optionIndex].price
      });
    });
  }

  // 添加到购物车
  cartStore.addToCart(currentGoods.value, selectedSpecifications, quantity.value);

  // 关闭弹窗
  closeGoodsDetail();
};

// 直接添加商品到购物车（不显示详情弹窗）
const addToCart = (goods) => {
  // 默认选择每个规格的第一个选项
  const selectedSpecifications = [];
  if (goods.specifications && goods.specifications.length > 0) {
    goods.specifications.forEach(spec => {
      selectedSpecifications.push({
        name: spec.name,
        value: spec.options[0].name,
        price: spec.options[0].price
      });
    });
  }

  // 添加到购物车
  cartStore.addToCart(goods, selectedSpecifications, 1);
};

// 显示购物车详情
const showCartDetail = () => {
  cartDetailPopup.value.open();
};

// 更新购物车商品数量
const updateCartItemQuantity = (index, quantity) => {
  cartStore.updateItemQuantity(index, quantity);
};

// 清空购物车
const clearCart = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空购物车吗？',
    success: (res) => {
      if (res.confirm) {
        cartStore.clearCart();
        cartDetailPopup.value.close();
      }
    }
  });
};

// 去结算
const goToCheckout = () => {
  // 检查购物车是否属于当前商家
  if (cartStore.currentMerchantId !== merchantId.value) {
    uni.showModal({
      title: '提示',
      content: '当前购物车属于其他商家，请返回或清空后选择本店商品',
      showCancel: false,
      confirmText: '知道了'
    });
    return;
  }
  
  uni.navigateTo({
    url: `/pages/order/confirm?merchantId=${merchantId.value}`
  });
};
</script>

<script>
export default {
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    uni.$emit('onGoodsScrollToLower');
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f0f2f5;
}

/* 商户信息区域 */
.merchant-header {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.merchant-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.8);
  transform: scale(1.1);
}

.merchant-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  display: flex;
  align-items: flex-end;
  gap: 20rpx;
}

.merchant-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
}

.merchant-detail {
  flex: 1;
}

.merchant-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 10rpx;
}

.merchant-rating {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}

.rating-value,
.rating-star {
  color: #ffb86c;
  font-size: 28rpx;
}

.sales-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
}

.merchant-meta {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}

.meta-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
}

.meta-divider {
  color: rgba(255, 255, 255, 0.3);
}

.merchant-address {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}

/* 商品区域 */
.goods-container {
  display: flex;
  height: calc(100vh - 400rpx);
  background: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  margin-top: -30rpx;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 左侧分类列表 */
.category-list {
  width: 180rpx;
  height: 100%;
  background: #f7f8fa;
  box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.06);
}

.category-item {
  padding: 30rpx 20rpx;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}

.category-item.active {
  background: lighten($primary-color, 40%);
  color: $primary-dark;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 36rpx;
  background: #ff4d4f;
  border-radius: 0 3rpx 3rpx 0;
}

.category-name {
  font-size: 26rpx;
  font-weight: 500;
}

/* 右侧商品列表 */
.goods-list {
  flex: 1;
  height: 100%;
  padding: 20rpx;
}

.goods-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f0f0f0;
  transition: all 0.3s;
}

.goods-item:active {
  transform: scale(0.98);
  background: #fafafa;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.goods-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.goods-sales {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.goods-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 24rpx;
  color: $primary-dark;
}

.price-value {
  font-size: 32rpx;
  font-weight: bold;
  color: $primary-dark;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.add-btn {
  width: 120rpx;
  height: 48rpx;
  background: $primary-color;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx $button-shadow;
  transition: all 0.3s;
}

.add-btn:active {
  transform: scale(0.95);
}

.add-text {
  color: #fff;
  font-size: 26rpx;
}

.add-icon {
  width: 44rpx;
  height: 44rpx;
  background: linear-gradient(135deg, #ff9a9e, #ff6b6b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.2);
  transition: all 0.3s;
  position: relative;
}

.add-icon::before {
  content: '';
  position: absolute;
  width: 20rpx;
  height: 4rpx;
  background: #fff;
  border-radius: 2rpx;
}

.add-icon::after {
  content: '';
  position: absolute;
  width: 4rpx;
  height: 20rpx;
  background: #fff;
  border-radius: 2rpx;
}

.add-icon:active {
  transform: scale(0.9);
  background: #ff6666;
}

/* 购物车栏 */
.cart-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 98;
  gap: 20rpx;
}

.cart-bar.empty-cart {
  opacity: 0.6;
}

.cart-bar.empty-cart .cart-icon-bg {
  background: #999;
}

.cart-bar.empty-cart .cart-count {
  display: none;
}

.cart-bar.empty-cart .price-value {
  color: #999;
}

.cart-bar.empty-cart .checkout-btn,
.cart-bar .checkout-btn.disabled {
  background: #ccc;
  box-shadow: none;
  pointer-events: none;
}

.cart-bar.empty-cart .checkout-btn text,
.cart-bar .checkout-btn.disabled text {
  color: #fff;
  font-size: 26rpx;
  font-weight: normal;
}

.cart-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1.5;
}

.cart-icon {
  position: relative;
  width: 90rpx;
  height: 90rpx;
  margin-top: -30rpx;
  flex-shrink: 0;
}

.cart-icon-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 90rpx;
  height: 90rpx;
  background: linear-gradient(135deg, #ff9a9e, #ff6b6b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.cart-count {
  position: absolute;
  top: 0;
  right: -6rpx;
  min-width: 36rpx;
  height: 36rpx;
  padding: 0 8rpx;
  background: #fff;
  border: 2rpx solid #ff6b6b;
  border-radius: 18rpx;
  color: #ff6b6b;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.cart-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.price-label {
  font-size: 24rpx;
  color: #999;
  line-height: 1.2;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b6b;
  line-height: 1.2;
}

.delivery-tip {
  font-size: 22rpx;
  color: #ff9500;
  background: rgba(255, 149, 0, 0.1);
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid rgba(255, 149, 0, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
  flex: 1;
}

.checkout-btn {
  width: 160rpx;
  height: 72rpx;
  background: linear-gradient(135deg, #ff9a9e, #ff6b6b);
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
  transition: all 0.3s;
  flex-shrink: 0;
  flex: 1;
}

.checkout-btn:active {
  transform: scale(0.95);
  background: #ff6666;
}

.checkout-btn text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}

/* 弹窗样式 */
.goods-detail-popup,
.cart-detail-popup {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 120rpx;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

.popup-content {
  padding: 30rpx;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.close-btn,
.clear-btn {
  font-size: 32rpx;
  color: #999;
  padding: 10rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.detail-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.detail-info {
  margin-bottom: 30rpx;
}

.detail-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.detail-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 10rpx;
}

.detail-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 规格选择 */
.specs-section {
  margin-bottom: 30rpx;
}

.spec-group {
  margin-bottom: 20rpx;
}

.spec-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.spec-option {
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  background: #f8f8f8;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s;
}

.spec-option.active {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

/* 数量选择 */
.quantity-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.quantity-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.quantity-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s;
}

.quantity-btn:active {
  background: #f0f0f0;
}

.quantity-value {
  font-size: 28rpx;
  color: #333;
  min-width: 60rpx;
  text-align: center;
}

/* 购物车商品列表 */
.cart-items {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: 20rpx;
  background: #fff;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.item-specs {
  font-size: 24rpx;
  color: #999;
}

.item-price-control {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.item-price {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: bold;
}

/* 加载更多区域 */
.load-more-area {
  padding: 20rpx 0;
  text-align: center;
}

/* 弹窗底部 */
.popup-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.add-to-cart-btn {
  width: 240rpx;
  height: 72rpx;
  background: linear-gradient(135deg, #ff9a9e, #ff6b6b);
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
  transition: all 0.3s;
}

.add-to-cart-btn:active {
  transform: scale(0.95);
  background: #ff6666;
}

.add-to-cart-btn text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}
</style>